<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="car-management" content="car,GPS,WebGIS，高德地图，园区车辆管理系统">
    <title>XX园区车辆管理系统</title>
    <link rel="icon" href="img/car1.png" type="image/x-icon">
    <script type="text/javascript" src="js/flexible.js"></script>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="../config.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            user-select: none;
            -webkit-user-drag: none;
            font-size: 14px;
        }

        html{
            width: 100%;
            height: 100%;
        }

        body{
            background-image: url("./img/login_background.png");
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        #big_title{
            position: relative;
            top: 20px;
            left: 40px;
        }

        /* 登录框 */
        .login{
            width: 420px;
            height: 420px;
            background: rgba(70,150,240,0.7);
            display: flex;
            position: absolute;
            top: 20%;
            right: 15%;
        }

        /* 头 */
        .login_title{
            width: 100%;
            height: 126px;
            position:absolute;
            text-align: center;
            line-height: 140px;
            font-size: 32px;
            font-weight:bold;
            color:white;
        }

        /* 登陆失败提示 */
        #login_hint{
            position: absolute;
            top: 120px;
            left: 60px;
            display: none;
            font-size: 18px;
            color:rgba(212, 28, 28,0.5)
        }

        /* 中 */
        .user_div{
            position:absolute;
            /* background-color:seagreen; */
            width: 100%;
            height: 168px;
            top: 126px;
        }

        .user{
            position: absolute;
            top: 20px;
            left: 60px;
            font-size: 14px;
        }

        .user img{
            float: left;
            width: 50px;
            height: 50px;
            opacity: 0.8;
            font-size: 14px;
        }

        .user input{
            position:absolute;
            opacity: 0.6;
            bottom: 0px;
            width: 240px;
            height: 50px;
            font-size: 18px;
            border: none;
            outline: none;
            z-index: 1;
        }

        #password{
            top:76px;
        }

        /* 下 */
        #login_button{
            position: absolute;
            background-color: royalblue;
            width: 290px;
            height: 50px;
            top: 160px;
            left: 59px;
            text-align: center;
            font-size: 22px;
            padding: 0px 0 0 0;
            color: white;
            text-decoration:none;
            border-style: none;
        }

        #login_button:hover{
            background-color: #00F5FF;
        }

    </style>
</head>
<body>
    <div>
        <img src="img\big_title.png" alt="XX园区车辆管理系统" id="big_title">
    </div>
    <div class="login">
        <div class="login_title">
            管理员登陆
        </div>
        <label id="login_hint">用户名或密码错误</label>
        
        <form id="form1" >
            <div class="user_div">
                <div class="user">
                    <img src="img/账号.png" alt="请输入用户名">
                    <input type="text" value="admin" name="username" placeholder="请输入用户名" autocomplete="off">
                </div>               
                <div class="user" id="password">
                    <img src="img/密码.png" alt="请输入密码">
                    <input type="password" value="123456" name="password" placeholder="请输入密码" >
                </div>
                <input type='button' value='登录' id="login_button"/>                            
            </div>    
        </form>
        <!-- <iframe name="admin_ups" style="display: none;"></iframe> -->
</body>
<script>

// ----------------------------------------
    // 提交数据
    $("#login_button").click(btnSubmit)
    function btnSubmit(username) {
        // 用户数据
        let user = $("#form1 [name='username']").val();
        let password = $("#password input").val()
        user_data = {
                "username": user,
                "password": password
            }
        // 格式验证
        if (user.length < 5) {
                $("#login_hint").html("用户名不小于5位！")
                $("#login_hint").css({ "display": "inline", color: "red" })
                return
            }
        if (password.length < 5) {
                    $("#login_hint").html("密码不小于5位！")
                    $("#login_hint").css({ "display": "inline", color: "red" })
                    return
            }
              
        // 检查响应
        let defer = setTimeout(()=>{
            alert("请稍后再试！")
            window.location.reload()
        }, 4000)

        $("#login_hint").html("登陆中...")
        $("#login_hint").css({ "display": "inline", color: "black" })
        
        // 发送请求
        let url = global_config["ip"] +":"+ global_config["api_port_1"]+"//login"
        $.post(url,user_data,
            // 回调
            data => {
                if (data) {
                    clearTimeout(defer)
                    if (data === "正确") {
                        localStorage.setItem("user",{})
                        setTimeout(() => {
                            setTimeout(() => {
                                window.location.href = "index.html";
                            }, 200)
                            localStorage.setItem("user",JSON.stringify(user_data))
                            $("#login_hint").html("登录成功！")
                            $("#login_hint").css({ "display": "inline", color: "green" })
                        }, 200)
                    } else if (data === "错误") {
                        $("#login_hint").html("用户名或密码错误！")
                        $("#login_hint").css({ "display": "inline", color: "red" })
                    }else{
                        alert(`data:${data}`)
                    }
                } else {
                    clearTimeout(defer)
                    alert("异常！")
                }
            });
    }

</script>
</html>